const dialogDrag = {
  mounted (el) {
    const dialogHeaderEl = el;
    if (!['p', 'span', 'img', 'button'].includes(el.tagName.toLocaleLowerCase())) {
      dialogHeaderEl.style.cssText += ";cursor:move;";
    }
    dialogHeaderEl.onmousedown = (e) => {
      // e.stopPropagation();
      const { tagName } = e.target;

      let originalStyles = window.getComputedStyle(dialogHeaderEl);
      document.onmousemove = function (e) {
        if (['p', 'span', 'img', 'button'].includes(tagName.toLocaleLowerCase())) {
          return false;
        }
        let left = e.movementX + parseInt(originalStyles.left);
        let top = e.movementY + parseInt(originalStyles.top);
        dialogHeaderEl.style.cssText += `;left:${left}px;top:${top}px;`;
      };
      document.body.onselectstart = document.body.ondrag = function () {
        if (['p', 'span', 'img', 'button'].includes(tagName.toLocaleLowerCase())) {
          return true;
        } else {
          return false
        }
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        document.body.onselectstart = null;
        document.body.ondrag = null;
      };
    };
  },
}
export default dialogDrag
